<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  /*body{*/
    /*background-color: #040f3c;*/
    /*padding: 0;*/
    /*margin: 0;*/
    /*text-align: center;*/
    /*!*height: 1500px;*!*/
  /*}*/
  .wrapper{
    height: 100%;
    width: 100%;
    overflow: visible;
    position: absolute;
    /*top: 54px;*/
    z-index: 50;
    top:0;
    bottom: 0;
    /*border: 1px solid red;*/
  }
  .header{
    height: 10%;
    position: relative;
    padding-top: 5px;
    font-size: 30px;
    color: #00ffff;
    text-align: center;
    background: url("//www.17sucai.com/preview/1528155/2018-12-25/echarts/assets/bg.png") top center no-repeat;
  }
  .main{
    padding: 0 2%;
    height: 89%;
    margin: 0;
    /*height: 1400px;*/
  }
  .contentRigth{
    width: 80%;
    height: 100%;
    /*border: 1px solid red;*/
  }
  .contentLeft{
    width: 20%;
    height: 100%;
    /*border: 1px solid red;*/
  }
  .mainContent{
    width: 100%;
    /*border: 1px solid black;*/
    display: flex;
    height: 100%;

  }
  .rightTop{
    width: 100%;
    height: 70%;
    /*border: 1px solid blue;*/
    display: flex;
  }
  .rightBottom{
    width: 100%;
    height: 30%;
    /*border: 1px solid blue;*/
    display: flex;
  }
  .rightTop-left{
    width: 25%;
    height: 100%;
    /*border: 1px solid blue;*/
  }
  .rightTop-left .p{
    /*width: 100%;*/
    height: 44%;
    /*border: 1px solid red;*/
    width: 90%;
    margin-left: 5%;
    margin-bottom: 7% !important;
  }
  .rifhtTop-right{
    width: 75%;
    height: 100%;
    /*border: 1px solid blue;*/
  }
  .rifhtTop-right .p{
    width: 94%;
    margin-left: 3%;
    height: 92%;
    /*border: 1px solid red;*/
  }
  .rightBottom .p{
    width: 23%;
    margin-left: 1.5% !important;
    height: 80%;
    /*border: 1px solid red;*/
  }
  .rightBottom .p:first-child{
    margin-left:0 !important;
  }
  .contentLeft .p{
    width: 92%;
    height: 94%;
    margin-left: 4%;
    /*border: 1px solid red;*/
  }
  .p{
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    border: 1px solid #54dcf2 !important;
    color: white !important;
  }
  .p span{
    position: absolute;
    height: 35px;
    width: 35px;

  }
  .leftT {
    top: -4px;
    left: -4px;
    border-top: 3px solid #54dcf2;
    border-left: 3px solid #54dcf2;
  }
  .rightT{
    top: -4px;
    right: -4px;
    border-top: 3px solid #54dcf2;
    border-right: 3px solid #54dcf2;
  }
  .rightB{
    bottom: -4px;
    right: -4px;
    border-bottom: 3px solid #54dcf2;
    border-right: 3px solid #54dcf2;
  }
  .leftB{
    bottom: -4px;
    left: -4px;
    border-bottom: 3px solid #54dcf2;
    border-left: 3px solid #54dcf2;
  }
  ul{
    display: inline-block;
  }
span{
  margin: 5px;
}
</style>
<body>
<!--<div class="wrapper">-->
<!--<div class="header">-->
<!--标题-->
<!--</div>-->
  <!--<div class="main">-->
    <!--<div class="mainContent" style="">-->
      <!--<div class="contentRigth">-->
        <!--<div class="rightTop">-->
          <!--<div class="rightTop-left ">-->
            <!--<div class="p">-->
<!--<ul>-->
  <!--<li>464646465</li>-->
  <!--<li>464646465</li>-->
  <!--<li>464646465</li>-->
  <!--<li>464646465</li>-->
  <!--<li>464646465</li>-->
  <!--<li>464646465</li>-->
  <!--<li>464646465</li>-->
  <!--<li>464646465</li>-->
  <!--<li>464646465</li>-->
  <!--<li>464646465</li>-->
  <!--<li>464646465</li>-->
  <!--<li>464646465</li>-->
  <!--<li>464646465</li>-->
<!--</ul>-->
              <!--<span class="rightT"></span>-->
              <!--<span class="leftT"></span>-->
              <!--<span class="leftB"></span>-->
              <!--<span class="rightB"></span>-->
            <!--</div>-->
            <!--<div class="p">-->
              <!--<span class="rightT"></span>-->
              <!--<span class="leftT"></span>-->
              <!--<span class="leftB"></span>-->
              <!--<span class="rightB"></span>-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="rifhtTop-right ">-->
            <!--<div class="p">-->
              <!--<span class="rightT"></span>-->
              <!--<span class="leftT"></span>-->
              <!--<span class="leftB"></span>-->
              <!--<span class="rightB"></span>-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
        <!--<div class="rightBottom ">-->
          <!--<div class="p">-->
            <!--<span class="rightT"></span>-->
            <!--<span class="leftT"></span>-->
            <!--<span class="leftB"></span>-->
            <!--<span class="rightB"></span>-->
          <!--</div>-->
          <!--<div class="p">-->
            <!--<span class="rightT"></span>-->
            <!--<span class="leftT"></span>-->
            <!--<span class="leftB"></span>-->
            <!--<span class="rightB"></span>-->
          <!--</div>-->
          <!--<div class="p">-->
            <!--<span class="rightT"></span>-->
            <!--<span class="leftT"></span>-->
            <!--<span class="leftB"></span>-->
            <!--<span class="rightB"></span>-->
          <!--</div>-->
          <!--<div class="p">-->
            <!--<span class="rightT"></span>-->
            <!--<span class="leftT"></span>-->
            <!--<span class="leftB"></span>-->
            <!--<span class="rightB"></span>-->
          <!--</div>-->
        <!--</div>-->

      <!--</div>-->
      <!--<div class="contentLeft ">-->
        <!--<div class="p">-->
          <!--<span class="rightT"></span>-->
          <!--<span class="leftT"></span>-->
          <!--<span class="leftB"></span>-->
          <!--<span class="rightB"></span>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->


  <!--</div>-->
<!--</div>-->
<div id="test"></div>
</body>
<style>
  #test{
    /*display: flex;*/
     white-space: pre-wrap;
    width: 1349px;
    border: 1px solid;
  }
  span{
    color: red;
  }
</style>
</html>
<script>
  // let test=document.getElementById("test")
  //
  // function f1() {
  //   let text=''
  // for(let i=1;i<3000;i++){
  //   text+=`<span>${i*2*45*31}</span>`
  // }
  //   test.innerHTML=text
  // }
  //
  // f1()

  function getDateStr(AddDayCount) {
    var dd = new Date();
    dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
    var y = dd.getFullYear();
    var m = dd.getMonth()+1;//获取当前月份的日期
    var d = dd.getDate();
    return y+'/'+(m<10?'0'+m:m)+'/'+d;
  }
  console.log('前天：',getDateStr(-2)); // 前天： 2018-09-11
  console.log('昨天：',getDateStr(-1)); // 昨天： 2018-09-12
  console.log('今天：',getDateStr(0));  // 今天： 2018-09-13
  console.log('明天：',getDateStr(1));  // 明天： 2018-09-14
  console.log('明天：',getDateStr(200));  // 明天： 2018-09-14


</script>
